.novel-page {
  padding: 20rpx;
  /* background-color: rgb(210, 227, 208); */
  min-height: 100vh;

  .nav-wrap {
    padding-top: 20rpx;

    .typeface {
      display: flex;
      align-items: center;
      padding-left: 60rpx;
      height: 90rpx;

      // background-color: yellowgreen;
      .word-size {
        margin-right: 20rpx;
      }

      .size {
        margin: 0 30rpx;
      }

      .add-btn {
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        border: 2rpx solid #676767;
        border-radius: 30rpx;
      }
    }

    .backgrounds {
      display: flex;
      justify-content: space-evenly;
      height: 110rpx;
      margin-top: 20rpx;
      align-items: center;

      .bg-item {
        width: 90rpx;
        height: 90rpx;
        border-radius: 50%;
      }
    }

    .progress-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 110rpx;
      padding: 0 20rpx;
      color: #676767;
      font-size: 26rpx;
      text-align: center;

      .progress {
        width: 60%;
        margin: 0 20rpx;
      }

      .last {
        margin-right: 50rpx;
      }

    }

    .bottom-wrap {
      display: flex;
      justify-content: space-evenly;
      height: 110rpx;
      // background-color: red;
      font-size: 20rpx;

      .icon-item {
        width: 25%;
        text-align: center;

        .icon {
          image {
            width: 60rpx;
          }
        }
      }

    }
  }

  .content-wrap {
    height: 100vh;
  }

  .chapter-item {
    width: 80%;
    font-size: 26rpx;
    padding: 0 20rpx;
    // margin-top: 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
  }

  .c-active {
    color: red;
  }
}